<template>
  <transition name="loading">
    <div class="loading-wrap"
         ref="loading"
         v-show="loading">
      <span class="loading-refresh">释放刷新...</span>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Loading',
  props: {
    height: {
      type: Number
    },
    loading: Boolean
  },
  watch: {
    height (height) {
      this.$refs.loading.style.height = height + 'px'
      // console.log(this.$refs.loading.o)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.loading-wrap
  width 100%
  height 0
  transition all 0.3s
  position relative

  .loading-refresh
    width 100%
    font-size $delete
    color $location
    text-align center
    position absolute
    left 50%
    top 0
    transform translate(-50%, 0)

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(0, 100%, 0)
</style>
